<template>
	<view class="Jc_swiper_wp">
		<!-- 轮播图 -->
		<swiper class="Jc_swiper" :autoplay="Jswiper.autoplay" :circular="Jswiper.circular" :interval="Jswiper.interval"
			:indicator-dots="Jswiper.indicatorDots">
			<swiper-item class="Jc_swiper_item" v-for="item in Jinfo" @click="$navTo(item.link)">
				<image class="Jc_swiper_image" :src="item.thumb" mode="widthFix" />
				<!-- <image class="Jc_swiper_image" src="https://img.jinghushi.com/images/9/2024/09/SFD6NldNYreMd1p8MRn1fdva6vMir3.png" mode="widthFix"></image> -->
			</swiper-item>
		</swiper>
		<!-- <scroll-view class="menu" :scroll-x="true">
			<view class="item" v-for="item in meunList" :key="item.id" @click="$navTo(item.url)">
				<image :src="item.thumb" mode="widthFix"></image>
				<text>{{item.title}}</text>
			</view>
		</scroll-view> -->

	</view>
</template>

<script>
	export default {
		props: {
			Jinfo: {
				type: Array,
				default: () => []
			},
			Jswiper: {
				type: Object,
				default () {
					return {
						autoplay: true,
						circular: true,
						interval: 3000,
						indicatorDots: false,
					}
				}
			},
			// styles:{
			// 	type: Array,
			// 	default: () => []
			// }
		},
		data() {
			return {
				meunList: []
			}
		},
		mounted() {
			this.getMenu();
		},
		methods: {
			getMenu() {
				this.$axios('home/shopcalss', 'POST', 'shop').then((res => {
					if (res.data.code == 200) {
						this.meunList = res.data.data;
					}
				}))
			}
		}
	}
</script>

<style lang="scss">
	.Jc_swiper_wp {
		// background: $bg-color;
		// padding: 20upx 0 0;
		position: relative;
	}

	.Jc_swiper {
		height: 278rpx;
	}

	.Jc_swiper_item {
		// padding: 0 20upx;
	}

	.Jc_swiper_image {
		width: 100%;
		height: 100% !important;
		border-radius: 12rpx;
		will-change: transform;
	}

	.menu {
		white-space: nowrap;
		padding-left: 20upx;
		width: 100%;
	}

	.item {
		display: inline-block;
		position: relative;
		padding: 10upx 20upx 10upx 0;
		padding-right: 20upx;
		width: 22%;

		image {
			width: 100%;
		}

		text {
			font-size: 26upx;
			font-weight: bold;
			position: absolute;
			left: 10upx;
			bottom: 15upx;
		}
	}
</style>